<template>
    <div id="Calendar">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <van-sticky :offset-top="46">
            <div class="week">
                <div class="van-calendar__weekdays">
                    <span class="van-calendar__weekday">日</span>
                    <span class="van-calendar__weekday">一</span>
                    <span class="van-calendar__weekday">二</span>
                    <span class="van-calendar__weekday">三</span>
                    <span class="van-calendar__weekday">四</span>
                    <span class="van-calendar__weekday">五</span>
                    <span class="van-calendar__weekday">六</span>
                </div>
            </div>
        </van-sticky>
        <div class="line"></div>
        <van-calendar
                title="日历"
                :poppable="false"
                :show-confirm="false"
                :show-title="false"
                color="#0fa0a0"
                :readonly="false"
                className="setCursor"
                @confirm="confirm"
                :show-subtitle="false"
                :formatter="formatter"
        />
    </div>
</template>

<script>
    import NavBarTitle from 'components/NavBarTitle.vue'

    export default {
        data() {
            return {
                NavBarTitle: '选择日期',
            }
        },
        components: {
            NavBarTitle
        },
        methods: {
            formatter(day){
                // day.type = 'disabled'
                return day
            },
            confirm(date) {
                console.log(date);
                date = date.getTime();
                sessionStorage.setItem('dateSearch',date);
                if(sessionStorage.getItem("dateSearch")){
                    this.$router.replace('/home')
                }
            },
            week(date){
                switch (date.getDay())
                {
                    case 0:
                        return "周天";
                    case 1:
                        return "周一";
                    case 2:
                        return "周二";
                    case 3:
                        return "周三";
                    case 4:
                        return "周四";
                    case 5:
                        return "周五";
                    case 6:
                        return "周六";
                }
            }
        },
        beforeMount() {

        }
    }
</script>

<style scoped>
    .week {
        background-color: #ffffff;
        box-shadow: 0 0.05333rem 0.26667rem rgba(125, 126, 128, .16);
    }

    /deep/ .van-calendar__header {
        display: none;
    }

    /deep/ .van-calendar__weekday {
        padding: 11px 0;
    }

    .line {
        width: 100%;
        height: 8px;
        background-color: #f7f7f7;
    }
    .setCursor{
        cursor: not-allowed;
        pointer-events: none;
    }
</style>